<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>index.htm</title>
    <style type="text/css">
    /*".xw{" 是最外层的盒子 */
    .xw{
        position: relative;
        left: 900px;/*向右移动*/
        top: 460px;/*向下移动*/
        width: 540px;/*盒子多宽*/
        border-style: solid;/*加竖线*/
        border-width: 1px;/*竖线宽度*/
    }
    /* ".xw1"是放新闻图片的 */
    .xw1{
        position: absolute;
        left: 91%;
        height: 30px;
        text-align: right;
        top: 4%;
    }
    /* ".xw2"是搞列表的 */
    .xw2{
        border-width: 1px;/*左边竖线宽度*/
        margin-left: 20px;  /* 离外侧多远 */
        border-left-style: solid;/*加竖线*/
        list-style-image:url('../郭宇轩第四部分作业/Git/html练习/HTML综合练习1素材/admin_ico.gif')/*改小方点为小红点,将点改为图片*/
    }
    .xw3{
        margin-left: -20px;/*调小红点离竖线多远*/
    }
    </style>
</head>
<body>
    <div class="xw">
        <img src="../郭宇轩第四部分作业/Git/html练习/HTML综合练习1素材/index_07.gif">
    <div class="xw1">更多</div>
        <div class="xw2">
            <ul class="xw3">
                <li><div style="background:url('../郭宇轩第四部分作业/Git/html练习/HTML综合练习1素材/ashline_foot.gif')">新一代电脑问世</div></li>
                <li>搜索新闻</li>
                <li><div style="background:url('../郭宇轩第四部分作业/Git/html练习/HTML综合练习1素材/ashline_foot.gif')">微软</div></li>
                <li>沃达丰今年推出新品</li>
                <li><div style="background:url('../郭宇轩第四部分作业/Git/html练习/HTML综合练习1素材/ashline_foot.gif')">电子产品污染有控制</div></li>
                <li>微软新闻</li>
                <li><div style="background:url('../郭宇轩第四部分作业/Git/html练习/HTML综合练习1素材/ashline_foot.gif')">汉芯一代将问世</div></li>
                <li>AMD处理器2006年度最新蓝图</li>
            </ul>
         </div>
     </div>
</body>
</html>

